<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<!-- athour:ChenYouming -->
<meta http-equiv="Content-Type" content="text/html; charset=utf8" />
<meta name="renderer" content="webkit" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<title>预约挂号</title>
<link rel="icon" href="favicon.ico" type="image/x-icon" />
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
<link rel="stylesheet" href="css/normalize.css" type="text/css" />
<link rel="stylesheet" href="css/secondary.css" type="text/css" />
<link rel="stylesheet" href="css/yuyuefenye.css" type="text/css" />
</head>

<body>
	<div class="BaseMark logoBase">
		<a href="index.html"
			style="font-size: 30px; font-weight: 800; color: black; margin-top: 60px; display: inline-block;">智慧医疗平台</a>
	</div>
	<div class="tools" style="margin-left: 700px; margin-top: -70px;">
			<img src="images/ico_001.gif" class="load" width="52" height="52" />
			<img src="images/ico_002.gif" class="load" width="52" height="52"
				style="margin-left: 100px;" /> <img alt="" src="images/ico_003.gif"
				class="load" width="52" height="52" style="margin-left: 100px;" />
			<img src="images/ico_004.gif" class="load" width="52" height="52"
				style="margin-left: 100px;" /><br> <a
				href="http://127.0.0.1:8080/witmed/front/index.jsp" target="_blank"
				style="margin-left: -45px; font-size: 18px;"><em>互联智慧分诊平台</em></a>
				 <a
				href="http://www.cq12320.cn/"
				style="text-indent: 20px; font-size: 18px; margin-left: 17px;"><em><span>12320</span>
					投诉平台</em></a> 
					<a href="http://61.49.18.120:9090/unit/index"
				style="text-indent: 25px; font-size: 18px; margin-left: 60px;"><em>卫健委</em></a>
			<a  href="../back/userBackindex.jsp"
				style="text-indent: 25px; font-size: 18px; margin-left: 40px;"
				class="last"><em>用户个人信息查询</em></a>
		</div>
	</header>
	<nav>
		<div class="navBase">
			<div class="quickMenuBase" data-type="1">
				<div class="quickMenu01" style="width: 240px">快捷菜单</div>
				<div class="quickMenu02 animated"></div>

			</div>
			<div class="nav Inav" style="width: 943px">
				<ul>
					<li class="PMenu"><a href="index.jsp" title="首页"
						class="PAMenu">首页</a></li>
					<li class="PMenu"><img src="images/ico_014.png"
						class="animated" width="15" height="8" /> <a
						href="appointment.jsp" id="Nav_AMenu0" class="PAMenu" title="预约挂号">预约挂号</a></li>

					<li class="PMenu"><img src="images/ico_014.png"
						class="animated" width="15" height="8" /><a
						href="../chat/custom.html" id="Nav_AMenu1" class="PAMenu"
						title="在线咨询">在线咨询</a></li>
					<li class="PMenu"><img src="images/ico_014.png"
						class="animated" width="15" height="8" /><a
						href="../back/doctorhome.jsp" id="Nav_AMenu2" class="PAMenu"
						title="医生中心">医生中心</a></li>
					<li class="PMenu"><img src="images/ico_014.png"
						class="animated" width="15" height="8" /><a
						href="../back/superadminhomepage.jsp" id="
						Nav_AMenu3"
						class="PAMenu" title="管理员中心">管理员中心</a></li>

					<li class="PMenu"><img src="images/ico_014.png"
						class="animated" width="15" height="8" /><a href="map.html"
						id="Nav_AMenu4" class="PAMenu" title="地图导航">地图导航</a></li>
					<li class="PMenu"><img src="images/ico_014.png"
						class="animated" width="15" height="8" /><a href="news.jsp"
						id="Nav_AMenu5" class="PAMenu" title="科普文章">科普文章</a></li>
					<li class="PMenu"><img src="images/ico_014.png"
						class="animated" width="15" height="8" /><a
						href="../userRegisterAndLogin/pages/userLogin.jsp" id="Nav_AMenu6"
						class="PAMenu" title="登录">登录</a></li>
					<li class="PMenu"><a
						href="../userRegisterAndLogin/pages/userRegister.jsp"
						id="Nav_AMenu7" class="PAMenu" title="注册">注册</a></li>

				</ul>
			</div>
		</div>
	</nav>
	<div class="baseRight" style="width: 100%; float: none">
		<div class="title01" style="margin-left: 75px">预约安排</div>
	</div>


	<div style="top: 20px; padding-left: 72px; padding-top: 20px;">
		<select id="selected"
			style="height: 37px; width: 80px; vertical-align: middle">
			<option value="14">每页14/条</option>
			<option value="28">每页28/条</option>
			<option value="56">每页56/条</option>
		</select>
		<div
			style="display: inline-block; vertical-align: middle; width: 600px;">
			<div display="inline-block"
				style="font-size: 18px; font-weight: 900;">
				<span style="color: gray;">您的选择的医院：</span><span id="hospitalSpan"
					style="width: 130 px; display: inline-block;"></span> <span
					id="departmentSpan" style=""></span>
			</div>

		</div>
		<div
			style="display: inline-block; width: 500px; padding: 0px; vertical-align: middle;">
			<label
				style="font-size: 18px; font-weight: 900; vertical-align: middle">根据</label>
			<select id="selectSerach"
				style="height: 37px; vertical-align: middle"">
				<option value="2">医院名称</option>
				<option value="1">科室名称</option>
				<option value="0">医生姓名</option>
			</select> <input type="text" name="SearchWords" placeholder="请输入您要查找内容的关键字"
				value="" autocomplete="off" maxlength="28" id="SearchWords"
				style="width: 240px; height: 31px; vertical-align: middle" />
			<button type="button" id="search"
				style="vertical-align: middle; width: 80px; height: 37px; margin-left: 5px; margin-top: 0px; padding-left: 0px; font-size: 16px; background-color: #6BCBCA; color: white;">搜索</button>
		</div>
	</div>
	<div style="margin-left: 75px; clear: both;">
		<span style="font-size: 26px; width: 60px;">医院:</span>
		<div id="hospital" style="width: auto; margin-left: 60px"></div>
		<div class="clear"></div>
	</div>
	<div style="margin-left: 75px; clear: both;">
		<span style="font-size: 26px; width: 130px;">下属科室:</span>
		<div id="department" style="width: auto; margin-left: 60px"></div>
		<div class="clear"></div>
	</div>
	<div style="margin-left: 75px; clear: both;">
		<span style="font-size: 26px; width: 130px;">医生:</span>
		<div id="doctor" class="general"
			style="width: auto; margin-left: 60px;"></div>
		<div class="clear"></div>

	</div>
	<div id="DataTables_Table_0_paginate"
		style="font-size: 20px; margin-left: 75px; clear: both;"></div>
	<br>
	<div style="margin-left: 75px; clear: both;">
		<span style="font-size: 26px;">预约时间表:</span><br />
		<div class="clear"></div>
		<select id="appointmentTime"
			style="margin-top: 30px; height: 28px; z-index: 1; margin-left: 0px;">
			<option value="0">当天</option>
			<option value="1">明天</option>
			<option value="3">未来3天</option>
		</select>
		<div class="clear"></div>
		<table id="table" style="margin-top: 30px;">
			<tr id="yuyueshijian" style="float: left;"></tr>
		</table>
	</div>
	<div style="margin-left: 75px; margin-top: 30px; clear: both;">
		<h4>温馨提示</h4>
		<p>我院医师肩负着外出会诊、学术活动、教学、外出进修、出国学习、下乡等任务，因此出诊时间会临时调整，以当天出诊医师为准。此表仅供参考。</p>
	</div>
	<!-- 尾部 -->
	<footer>
		<div class="BottomHidden"></div>
		<div class="DWeibo">
			<a href="https://weibo.com/login.php" class="weibo" title="新浪微博">新浪官方微博</a><a
				href="#" class="tencent" title="腾讯微博">腾讯官方微博</a>
			<div class="clear"></div>
		</div>

		<div class="websiteInfo">
			<div class="info">
				主办单位：天堂医院 &nbsp; &nbsp;综合服务电话：120&nbsp;&nbsp; &nbsp;急救中心电话：120
				&nbsp; 传真：120 &nbsp; 地 址：天堂 &nbsp;<br> 版权所有：天堂智慧医疗
			</div>
			<ul>
				<li class="first"><a href="#" target="_blank">关于我们</a></li>
				<li><a href="#" target="_blank">法律声明</a></li>
				<li><a href="#" target="_blank">网站地图</a></li>
				<li><a href="#" target="_blank">联系我们</a></li>
				<li><a href="#" target="_blank">平台(信访)信箱</a></li>
			</ul>
			<div class="clear"></div>
			<p>
				©2020-
				<script language="javascript" type="text/javascript">
					document.write(new Date().getFullYear());
				</script>
				2020 . All Rights Reserved. <a
					href="http://www.miitbeian.gov.cn/publish/query/indexFirst.action"
					target="_blank">备案号0000001 </a>
			</p>
			<select id="ddlLinks">
				<option value="0">友情链接 HYPERLINK</option>
				<option value="http://www.cssmoban.com/">模板之家</option>
			</select>
		</div>
	</footer>
</body>
<script type="text/javascript" src="js/jquery-3.2.1.js"></script>
<script>
	$(function() {
		//页面加载查询所有医院
		findAllHospital();
		//页面加载查询所有科室
		findAllDepartment();
		//页面加载查询所有医生
		findLike(1)

		//搜索按钮点击事件
		$("#search").click(function() {
			$("#hospitalSpan").text("");
			$("#departmentSpan").text("");
			findLike(1);
		});
		//条数下拉框值发生改变事件
		$("#selected").change(function() {
			findLike(1);
		});

		// 首页
		$(document).on("click", "#DataTables_Table_0_first", function() {

			// 获取当前页码
			var pageNum = $("#pageInfo").data("pagenum");
			// 判断
			if (pageNum == 1) {
				alert("已经是首页");
			} else {
				// 调用发送请求方法,参数页码
				findLike(1)
			}
		});

		// 上一页
		$(document).on("click", "#DataTables_Table_0_previous", function() {
			// 获取当前页码
			var pageNum = $("#pageInfo").data("pagenum") - 1;

			if (pageNum < 1) {
				// 拦截请求
				alert("已经是第一页");
			} else {
				// 调用发送请求方法,参数页码
				findLike(pageNum);
			}
		})

		// 下一页
		$(document).on("click", "#DataTables_Table_0_next", function() {
			// 获取当前页码
			var pageNum = eval($("#pageInfo").data("pagenum") + 1);
			// 获取最大页码
			var pages = $("#pageInfo").data("pages");

			if (pageNum > pages) {
				// 拦截请求
				alert("已经是最后一页");
			} else {
				// 调用发送请求方法,参数页码
				findLike(pageNum);
			}
		})

		// 尾页
		$(document).on("click", "#DataTables_Table_0_last", function() {
			// 获取当前页码
			var pageNum = $("#pageInfo").data("pagenum");
			// 获取最大页码
			var pages = $("#pageInfo").data("pages");

			if (pageNum == pages) {
				// 拦截请求
				alert("已经是尾页");
			}
			// 调用发送请求方法,参数页码
			findLike(pages);

		})

		// 页码
		$(document).on("click", ".current", function() {
			// 获取当前显示的页码
			var currentPageNum = $("#pageInfo").data("pagenum");
			// 获取当前超链接上表示的页码
			var pageNum = $(this).text();
			if (currentPageNum == pageNum) {
				return;
			}
			// 调用发送请求方法,参数页码
			findLike(pageNum);
		});

		//点击预约按钮事件  查询预约时间
		$(document)
				.on(
						"click",
						".doctorid",
						function() {
							var time = $("#appointmentTime").val();
							var doctorId = $(this).data("value");
							console.log("time:" + time + " doctorId:"
									+ doctorId);
							$
									.ajax({
										async : true,
										url : "../AppointmentOperationServlet",
										type : "get",
										dataType : "json",
										data : {
											op : "seachByAppointmentTime",
											time : time,
											doctorId : doctorId
										},
										success : function(result) {
											$("#table").css("border",
													"2px black solid")
											var content = "";
											$
													.each(
															result,
															function(index,
																	items) {
																console
																		.log("::"
																				+ items.appointmentTime
																				+ ";")
																console
																		.log("userId:"
																				+ items.user.userId
																				+ ";");
																content += "<td  style=\"height:30px;font-size:18px;font-wieght:600;border:1px black solid ; float:left;\">"
																		+ items.appointmentTime
																				.substring(
																						0,
																						19)
																		+ "</td>"
																		+ "<td style=\"height:30px;font-size:18px;float:left;font-wieght:600;border:1px  black solid ;\"><a class=\"confirmAppiontment\" data-id=\""
																		+ items.appointmentId
																		+ "\"  data-time=\""
																		+ items.appointmentTime
																				.substring(
																						0,
																						19)
																if (items.user.userId == 0) {
																	content += "\" href=\"#\" id=\"\" style=\"text-decoration:none;\">确认预约<a/></td>";
																} else {
																	content += "\" href=\"#\" id=\"\" style=\"text-decoration:none;\" disabled=\"disabled\">已约满<a/></td>";
																}

															});
											$("#yuyueshijian").html(content);
										},
										error : function() {
											alert("异步请求失败！");
										}

									});
						});

		//确认预约按钮事件
		$(document)
				.on(
						"click",
						".confirmAppiontment",
						function() {
							if ("${sessionScope.user.userId}" != "") {
								$.ajax({
									async : true,
									url : "../AppointmentOperationServlet",
									type : "get",
									dataType : "json",
									data : {
										op : "confirmAppiontment",
										id : $(this).data("id"),
										time : $(this).data("time"),
										userid : "${sessionScope.user.userId}"
									},
									success : function(result) {
										console.log(result)
										if (result == "success") {
											alert("预约成功！");
										} else {
											alert("已约满!");
										}
									},
									error : function() {
										alert("异步请求失败！");
									}
								});

							} else {
								location.href = "../userRegisterAndLogin/pages/userLogin.jsp?msg=error"
							}

						});

	});

	//点击获取医院名字并查询
	function getHospitalName(object) {
		var hospitalName = $(object).data("val");
		var pageSize = $("#selected").val();
		$("#hospitalSpan").text(hospitalName);
		$.ajax({
			async : true,
			url : "../AppointmentOperationServlet",
			type : "get",
			dataType : "json",
			data : {
				op : "seachByHospitalName",
				pageNum : 1,
				pageSize : pageSize,
				hospitalName : hospitalName
			},
			success : function(result) {
				showdata1(result);
			},
			error : function() {
				alert("异步请求失败！");
			}

		});
	}
	//选择条件查询渲染医生数据
	function showdata1(result) {
		var doctor = "";
		$
				.each(
						result.data,
						function(index, items) {
							if (items.doctorName == null) { //判断医生名字为null设置空字符串
								items.doctorName = "";
							} else {
								doctor += "<div class=\"list01\" style=\"float:left; margin-left:10px;margin-top:18px\" data-val=\""+items.doctorName+"\">"
										+ "<img style=\"width:137px;height:182px;\" src=\"../FileDownloadServlet?fileName="+items.doctorPicturePath+"\" ><br/>"
										+ "<sapn style=\"color:orange;font-size:18px;\">姓名:</span>"
										+ items.doctorName
										+ "<br/><sapn style=\"color:black;font-size:18px;\">科室:</span>"
										+ items.department.departmentName
										+ "<br/><sapn style=\"color:black;font-size:18px;\">医院:</span>"
										+ items.department.hospital.hospitalName
										+ "<br/><span  class=\"doctorid\" data-value=\""+items.doctorId+"\" style=\"color:orange; font-size:18px;\">预约</span></div>";
							}
						});

		$("#doctor").html(doctor);
		$("#DataTables_Table_0_paginate").html("");
	}
	//点击获取科室名字并查询
	function getDepartmentName(object) {
		var departmentName = $(object).data("val");
		var hospitalName = $("#hospitalSpan").text();
		$("#departmentSpan").text("科室：" + departmentName);
		$.ajax({
			async : true,
			url : "../AppointmentOperationServlet",
			type : "get",
			dataType : "json",
			data : {
				op : "seachByDepartmentName",
				pageNum : 1,
				pageSize : 10,
				hospitalName : hospitalName,
				departmentName : departmentName
			},
			success : function(result) {
				showdata1(result);
			},
			error : function() {
				alert("异步请求失败！");
			}

		});
	}
	//模糊条件查询渲染医生数据
	function showdata(result) {
		// 渲染分页信息
		var pageInfo = "";
		pageInfo = "<span style=\"width:160px;margin-left:0pxmargin-top:-8px;\" id=\"pageInfo\" data-pagenum=\""+result.pageNum+"\"  data-pages=\""+result.pages+"\">每页"
				+ result.pageSize
				+ "条 共"
				+ result.total
				+ "条  第"
				+ result.pageNum + "/" + result.pages + "页</span>";

		if (result.pageNum == 1) {
			pageInfo += "<a tabindex=\"0\" class=\"first ui-corner-tl ui-corner-bl fg-button ui-button ui-state-default ui-state-disabled\" id=\"DataTables_Table_0_first\" disabled=\"disabled\">首页</a>";
			pageInfo += "<a tabindex=\"0\" class=\"previous fg-button ui-button ui-state-default ui-state-disabled\" id=\"DataTables_Table_0_previous\" disabled=\"disabled\" >上一页</a>";
		} else {
			pageInfo += "<a tabindex=\"0\" class=\"first ui-corner-tl ui-corner-bl fg-button ui-button ui-state-default \" id=\"DataTables_Table_0_first\" >首页</a>";
			pageInfo += "<a tabindex=\"0\" class=\"previous fg-button ui-button ui-state-default \" id=\"DataTables_Table_0_previous\"  >上一页</a>";
		}

		pageInfo += "<span>";

		for (var i = 1; i <= result.pages; i++) {
			// 设置当前的页面激活样式
			if (result.pageNum == i) {
				pageInfo += "<a tabindex=\"0\" class=\"fg-button ui-button ui-state-default ui-state-disabled current\"  >"
						+ i + "</a>";
			} else {
				pageInfo += "<a tabindex=\"0\" class=\"fg-button ui-button ui-state-default current\" >"
						+ i + "</a>";
			}
		}

		pageInfo += "</span>";

		if (result.pageNum == result.pages) {
			pageInfo += "<a tabindex=\"0\" class=\"next fg-button ui-button ui-state-default ui-state-disabled\" id=\"DataTables_Table_0_next\" disabled=\"disabled\">下一页</a>";
			pageInfo += "<a tabindex=\"0\" class=\"last ui-corner-tr ui-corner-br fg-button ui-button ui-state-default ui-state-disabled\" id=\"DataTables_Table_0_last\" disabled=\"disabled\">尾页</a>";
		} else {
			pageInfo += "<a tabindex=\"0\" class=\"next fg-button ui-button ui-state-default\" id=\"DataTables_Table_0_next\">下一页</a>";
			pageInfo += "<a tabindex=\"0\" class=\"last ui-corner-tr ui-corner-br fg-button ui-button ui-state-default\" id=\"DataTables_Table_0_last\">尾页</a>";
		}
		$("#DataTables_Table_0_paginate").html(pageInfo);
		var doctor = "";
		$
				.each(
						result.data,
						function(index, items) {
							if (items.doctorName == null) { //判断医生名字为null设置空字符串
								items.doctorName = "";
							} else {
								doctor += "<div class=\"list01\" style=\"float:left; margin-left:10px;margin-top:18px\" data-val=\""+items.doctorName+"\">"
										+ "<img style=\"width:137px;height:182px;\" src=\"../FileDownloadServlet?fileName="+items.doctorPicturePath+"\" ><br/>"
										+ "<sapn style=\"color:orange;font-size:18px;\">姓名:</span>"
										+ items.doctorName
										+ "<br/><sapn style=\"color:black;font-size:18px;\">科室:</span>"
										+ items.department.departmentName
										+ "<br/><sapn style=\"color:black;font-size:18px;\">医院:</span>"
										+ items.department.hospital.hospitalName
										+ "<br/><span  class=\"doctorid\" data-value=\""+items.doctorId+"\" style=\"color:orange;font-size:18px;\">预约</span></div>";
							}
						});
		$("#doctor").html(doctor);
	}
	//查询所有医院
	function findAllHospital() {
		$
				.ajax({
					async : true,
					url : "../AppointmentOperationServlet",
					type : "get",
					dataType : "json",
					data : {
						op : "findAllHospital",
					},
					success : function(result) {
						var hospital = "";
						$
								.each(
										result,
										function(index, items) {
											hospital += "<li class=\"HospitalName\" onclick=\"getHospitalName(this)\" style=\" float:left;margin-left:10px; font-size:18px;\"data-val=\""
													+ items.hospitalName
													+ "\">"
													+ items.hospitalName
													+ "</li>";
										});
						$("#hospital").html(hospital);
					},
					error : function() {
						alert("异步请求失败！");
					}
				});
	}
	//查询科室
	function findAllDepartment() {
		$
				.ajax({
					async : true,
					url : "../AppointmentOperationServlet",
					type : "get",
					dataType : "json",
					data : {
						op : "findAllDepartment",
					},
					success : function(result) {
						var department = "";
						$
								.each(
										result,
										function(index, items) {
											department += "<li onclick=\"getDepartmentName(this)\" style=\" float:left;margin-left:10px;margin-top:20px;font-size:18px;\" data-val=\""
													+ items.departmentName
													+ "\">"
													+ items.departmentName
													+ "</li>";
										});
						$("#department").html(department);
					},
					error : function() {
						alert("异步请求失败！");
					}
				});
	}
	//模糊搜索框查询
	function findLike(pageNum) {
		//获取关键字
		var keyWord = $("#SearchWords").val();
		var typeId = $("#selectSerach").val();
		var pageSize = $("#selected").val();
		$.ajax({
			async : true,
			url : "../AppointmentOperationServlet",
			type : "get",
			dataType : "json",
			data : {
				op : "getDoctorListLike",
				typeId : typeId,
				keyWord : keyWord,
				pageNum : pageNum,
				pageSize : pageSize
			},
			success : function(result) {
				showdata(result);
			},
			error : function() {
				alert("异步请求失败！");
			}
		});

	}
</script>
</html>